<script setup lang="ts">
import { delayTimer } from '@v-c/utils'
import { AxiosError } from 'axios'
import GlobalLayoutFooter from '~/layouts/components/global-footer/index.vue'
import { registerApi, sendSmsCodeApi, getCaptchaImageApi } from '~/api/common/login'
import pageBubble from '@/utils/page-bubble'
import { computed, ref } from 'vue'

const message = useMessage()
const notification = useNotification()
const appStore = useAppStore()
const { layoutSetting } = storeToRefs(appStore)
const loginModel = reactive({
  userName: undefined,
  userCompany: undefined,
  userPassword: undefined,
  confirmPassword: undefined,
  userPhone: undefined,
  captchaCode: undefined, // 图形验证码
  captchaId: undefined, // 图形验证码ID
  verificationcode: undefined,
  type: 'account',
  remember: true,
  agreeToTerms: false,
})
const { t } = useI18nLocale()
const formRef = shallowRef()
const codeLoading = shallowRef(false)
const resetCounter = 60
const submitLoading = shallowRef(false)
const errorAlert = shallowRef(false)
const bubbleCanvas = ref<HTMLCanvasElement>()
const is_disabled = ref(false)

// 图形验证码相关状态
const captchaImage = ref<string>('')
const captchaLoading = ref(false)
const showPassword = ref(false)
const showPassword2 = ref(false)

// 计算属性：检查表单是否完全有效
const isFormValid = computed(() => {
  // 必须同意协议
  if (!loginModel.agreeToTerms) {
    return false
  }
  
  // 检查所有必填字段
  const userName = String(loginModel.userName ?? '')
  const userCompany = String(loginModel.userCompany ?? '')
  const userPassword = String(loginModel.userPassword ?? '')
  const confirmPassword = String(loginModel.confirmPassword ?? '')
  const userPhone = String(loginModel.userPhone ?? '')
  const captchaCode = String(loginModel.captchaCode ?? '')
  const verificationcode = String(loginModel.verificationcode ?? '')
  
  return /^[\u4e00-\u9fa5A-Za-z0-9_-]+$/.test(userName) && userName.length >= 1 && userName.length <= 30 &&
         userCompany.length >= 2 && userCompany.length <= 50 &&
         /^\d{8}$/.test(userPassword) &&
         confirmPassword === userPassword &&
         /^\d{11}$/.test(userPhone) &&
         /^.{5}$/.test(captchaCode) &&
         /^\d{6}$/.test(verificationcode)
})

const { counter, pause, reset, resume, isActive } = useInterval(1000, {
  controls: true,
  immediate: false,
  callback(count) {
    if (count) {
      if (count === resetCounter)
        pause()
    }
  },
})
async function getCode() {
  // 检查是否还在倒计时中
  if (isActive.value) {
    message.error({
      content: '请等待上次验证码发送完成'
    })
    return
  }
  
  // 验证表单（手机号和图形验证码）
  await formRef.value.validate(['userPhone', 'captchaCode'])
  
  is_disabled.value = true
  codeLoading.value = true
  
  try {
    // 发送短信验证码，带上图形验证码参数
    await sendSmsCodeApi({ 
      phone: String(loginModel.userPhone ?? ''), 
      captcha_id: loginModel.captchaId,
      captcha_text: loginModel.captchaCode,
      ttl_seconds: 300 
    })
    
    // 发送成功后启动倒计时
    reset()
    resume()
    message.success('验证码已发送，请查收短信')
  }
  catch (error: any) {
    // request.ts 已经统一处理了有误消息显示，这里不需要再处理
    // 如果是图形验证码有误，自动刷新验证码
    if (error?.isBusinessError && (error.message?.includes('验证码') || error.message?.includes('已过期'))) {
      refreshCaptcha()
      // 清空当前输入
      loginModel.captchaCode = undefined
    }
  }
  finally {
    codeLoading.value = false
    // 发送完成后重新启用按钮
    is_disabled.value = false
  }
}

// 获取图形验证码
async function loadCaptchaImage() {
  captchaLoading.value = true
  try {
    const response: any = await getCaptchaImageApi(loginModel.captchaId ? { captcha_id: loginModel.captchaId } : undefined)
    if (response && response.data) {
      captchaImage.value = `data:image/png;base64,${response.data.image_base64}`
      loginModel.captchaId = response.data.captcha_id
    }
  } catch (error) {
    // request.ts 已经统一处理了有误消息显示，这里不需要再处理
  } finally {
    captchaLoading.value = false
  }
}

// 刷新图形验证码
function refreshCaptcha() {
  loadCaptchaImage()
}

// 切换密码显示/隐藏
function togglePassword() {
  showPassword.value = !showPassword.value
}

// 切换确认密码显示/隐藏
function togglePassword2() {
  showPassword2.value = !showPassword2.value
}

async function submit() {
  submitLoading.value = true
  try {
    await formRef.value?.validate()
    const payload = {
      userName: String(loginModel.userName || ''),
      userCompany: String(loginModel.userCompany || ''),
      userPassword: String(loginModel.userPassword || ''),
      confirmPassword: String(loginModel.confirmPassword || ''),
      userPhone: String(loginModel.userPhone || ''),
      verificationcode: String(loginModel.verificationcode || ''),
    }
    
    try {
      console.log(payload,"111111111")
      const response = await registerApi(payload) as any
      // 新结构：{ code: 0, message: "OK", data: { userName, userCompany, userPhone } }
      if (response && response.code === 0) {
        notification.success({
          message: '注册成功',
          description: `欢迎 ${response.data.userName}，请使用账号登录`,
          duration: 3,
        })
        // 延迟跳转，确保通知显示完成
        setTimeout(() => {
          // 使用 window.location.href 确保完全重新加载页面
          window.location.href = '/login'
        }, 1000)
      } else {
        // request.ts 已经统一处理了有误消息显示，这里不需要再处理
        submitLoading.value = false
      }
    }
    catch (e) {
      // request.ts 已经统一处理了有误消息显示，这里不需要再处理
      submitLoading.value = false
    }
  }
  catch (e) {
    if (e instanceof AxiosError)
      errorAlert.value = true
    else if (e instanceof Error)
      message.error({
        content: e.message
      })
  }
  finally {
    submitLoading.value = false
  }
}
onMounted(async () => {
  refreshCaptcha()
  await delayTimer(300)
  pageBubble.init(unref(bubbleCanvas)!)
  
  // 检查是否已经同意协议
  const accepted = localStorage.getItem('userAgreementAccepted')
  if (accepted === 'true') {
    loginModel.agreeToTerms = true
  }
  
  // 加载图形验证码
  await loadCaptchaImage()
})

// 密码确认验证器
const confirmPasswordValidator = (_rule: any, value: any) => {
  if (!value || value === '') {
    return Promise.reject(new Error(''))
  }
  if (value !== loginModel.userPassword) {
    return Promise.reject(new Error('两次输入的密码不一致'))
  }
  return Promise.resolve()
}

onBeforeUnmount(() => {
  pageBubble.removeListeners()
})
</script>

<template>
  <div class="login-container" style="background-color: #ffffff;">
    <div h-screen w-screen absolute z-10 style="">
<!-- 展示银行背景信息样式 -->
<div
           class="banner-container"
           style="
           width: 100%;
           height: 170px;
           background-color: #4791D2;
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0;
           padding: 0;
           overflow: hidden;
           "
           >

           </div>
           <div
           style="
           width: 100%;
           height: 50px;
           border-bottom: 1px solid #BBBBBB;
           background-color: #F5F5F5;
           "
           >
           <center>
            <span style="
            line-height: 50px;
            color: #333;
            font-size: 14px;
            font-weight: bold;
            ">
            6C考试客服专线：13342343242
            </span>
           </center>
           </div>

           <!-- 左右分栏 -->
        <div style="
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        ">
          <div style="
          width: 50%;
          height: 100%;
          background-color: #FFFFFF;
          ">
            
<!-- 登录卡片 -->
            <div class="login-card"
            style="padding-top:80px ;
            padding-left: 300px;
            padding-right: 50px;
            "
            >
 
              <a-form 
                style="
                position: relative;
                top: -24px;
                width:460px;
                padding: 0 25px;
                "
                  ref="formRef" :model="loginModel">
              <a-tabs v-model:active-key="loginModel.type" class="login-tabs">
          
                <a-tab-pane
                key="account" :tab="t('用户注册')" />
              </a-tabs>
              <!-- 判断是否存在error -->
              <a-alert
              style="display: none;"
                v-if="errorAlert && loginModel.type === 'account'" mb-24px
                :message="t('pages.login.accountLogin.errorMessage')" type="error" show-icon
              />
              <a-alert
              style="display: none;"
                v-if="errorAlert && loginModel.type === 'mobile'" mb-24px
                :message="t('pages.login.phoneLogin.errorMessage')" type="error" show-icon
              />
              <span style="opacity:0">0</span>
              <template v-if="loginModel.type === 'account'">
                <!-- 用户姓名 -->
                <a-form-item
                  name="userName" 
                  :validate-trigger="['blur']"
                  :rules="[
                    { required: true, message: t('pages.login.username.required') },
                    {
                      pattern: /^[\u4e00-\u9fa5A-Za-z0-9_-]+$/,
                      message: '姓名格式有误，支持中文、英文、数字、下划线和连字符',
                      trigger: 'blur'
                    },
                    {
                      max: 20,
                      message: '姓名过长',
                      trigger: 'blur'
                    },
                  ]"
                >
                  <div class="label-input-container">
                    <label  style="width: 80px;" class="input-label">姓名</label>
                    <a-input
                      class="custom-input-bg"
                      placeholder="请输入姓名"
                      style="flex: 1;"
                      v-model:value="loginModel.userName" 
                      size="large"
                      :maxlength="50"
                      autocomplete="off"
                      @press-enter="submit"
                    />
                  </div>
                </a-form-item>
                
                  <!-- 用户单位 -->
                   <a-form-item
                            name="userCompany"
                            :validate-trigger="['blur']"
                            :rules="[
                              { required: true, message: t('pages.login.unit.required') },
                              {
                                max: 20,
                                message: '单位名称过长',
                                trigger: 'blur'
                              },
                              { min: 2, max: 50, message: t('pages.login.unit.length'), trigger: 'blur' }
                            ]"
                          >
                      <div class="label-input-container">
                        <label style="width: 80px;" class="input-label">单位</label>
                        <a-input
                          class="custom-input-bg"
                          placeholder="请输入单位"
                          style="flex: 1;"
                          v-model:value="loginModel.userCompany"
                          autocomplete="off"
                          size="large"
                          :maxlength="50"
                          @press-enter="submit"
                        />
                      </div>
                    </a-form-item>

                    <!-- 用户密码 -->
                     <a-form-item
  name="userPassword"
  :validate-trigger="['blur']"
  :rules="[
    { required: true, message: '请输入密码' },
    { 
      pattern: /^\d{8}$/, 
      message: '密码格式有误，请输入8位数字', 
      trigger: 'blur' 
    }
  ]"
>
  <div class="label-input-container">
    <label style="width: 80px;" class="input-label">密码</label>
    <a-input
      :type="showPassword ? 'text' : 'password'"
      v-model:value="loginModel.userPassword"
      class="password-input-wrapper"
      placeholder="请输入8位数字密码"
      :maxlength="8"
      autocomplete="off"
      @press-enter="submit"
      @blur="() => formRef?.validateFields(['confirmPassword'])"
    >
      <template #suffix>
        <span class="password-toggle-eye" @click="togglePassword">
          <span v-if="showPassword">👁️</span>
          <span v-else>👁️‍🗨️</span>
        </span>
      </template>
    </a-input>
  </div>
</a-form-item>
<a-form-item
  name="confirmPassword"
  :validate-trigger="['blur', 'change']"
  :rules="[
    { required: true, message: '请确认密码' },
    { 
      validator: confirmPasswordValidator
    }
  ]"
>
  <div class="label-input-container">
    <label style="width: 80px;" class="input-label">确认密码</label>
    <a-input
      :type="showPassword2 ? 'text' : 'password'"
      v-model:value="loginModel.confirmPassword"
      class="password-input-wrapper"
      placeholder="请再次输入8位数字密码"
      :maxlength="8"
      autocomplete="off"
      @press-enter="submit"
    >
      <template #suffix>
        <span class="password-toggle-eye" @click="togglePassword2">
          <span v-if="showPassword2">👁️</span>
          <span v-else>👁️‍🗨️</span>
        </span>
      </template>
    </a-input>
  </div>
</a-form-item>
                <a-form-item
                  name="userPhone" 
                  :validate-trigger="['blur']"
                  :rules="[
                    { required: true, message: t('pages.login.phoneNumber.required') },
                    {
                      pattern:  /^\d{11}$/,
                      message: t('pages.login.phoneNumber.invalid'),
                      trigger: 'blur'
                    },
                  ]"
                >
                  <div class="label-input-container">
                    <label style="width: 80px;" class="input-label">手机号</label>
                    <a-input
                      class="custom-input-bg"
                      placeholder="请输入手机号"
                      style="flex: 1;"
                      autocomplete="off"
                      v-model:value="loginModel.userPhone"
                      size="large" 
                      :maxlength="11"
                      @press-enter="submit"
                    />
                  </div>
                </a-form-item>
                
                <!-- 图形验证码 -->
                <a-form-item
                  name="captchaCode"
                  :validate-trigger="['blur']"
                  :rules="[
                    { required: true, message: '请输入验证码' },
                    {
                      pattern: /^.{5}$/,
                      message: '验证码格式有误',
                      validateTrigger: 'blur'
                    },
                  ]"
                >
                  <div class="label-input-container">
                    <label  style="width: 80px;" class="input-label">验证码</label>
                    <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
                      <a-input
                        class="custom-input-bg"
                        v-model:value="loginModel.captchaCode"
                        placeholder="请输入验证码"
                        style="flex: 1;"
                        size="large"
                        :maxlength="5"
                        autocomplete="off"
                        @press-enter="submit"
                      />
                      <div 
                        @click="refreshCaptcha"
                        style="
                          width: 120px;
                          height: 35px;
                          cursor: pointer;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          border: 1px solid #d9d9d9;
                          border-radius: 3px;
                          background-color: #F9F9F9;
                          overflow: hidden;
                        "
                      >
                        <img 
                          v-if="captchaImage"
                          :src="captchaImage"
                          alt="验证码"
                          style="width: 100%;
                          position: relative;
                          height: 100%; object-fit: cover;"
                        />
                        <span v-else-if="captchaLoading">加载中...</span>
                        <span v-else>点击刷新</span>
                      </div>
                    </div>
                  </div>
                </a-form-item>
                
                <a-form-item 
                  name="verificationcode" 
                  :validate-trigger="['blur']"
                  :rules="[
                    { required: true, message: t('pages.login.captcha.required') },
                    {
                      pattern: /^\d{6}$/,
                      message: '验证码需为6位数字',
                      trigger: 'blur'
                    }
                  ]"
                >
                  <div class="label-input-container">
                    <label style="width: 80px;" class="input-label">短信验证码</label>
                    <div class="input-with-button" style="flex: 1;">
                      <a-input
                        class="custom-input-bg"
                        v-model:value="loginModel.verificationcode"
                        placeholder="请输入短信验证码"
                        style="flex: 1;"
                        size="large" 
                        :maxlength="6"
                        autocomplete="off"
                        @press-enter="submit"
                      />
                      <a
                        href="#" 
                        class="code-button"
                        :class="{ 'disabled': is_disabled || isActive }"
                        :loading="codeLoading" 
                        size="large" 
                        :disabled="is_disabled || isActive"
                        @click="!is_disabled && !isActive ? getCode() : null"
                      >
                        <template v-if="!isActive">
                          {{ t('pages.login.phoneLogin.getVerificationCode') }}
                        </template>
                        <template v-else>
                          <span style="color: #BBBBBB;">
                            {{ t('pages.getCaptchaSecondText') }}  
                            {{ resetCounter - counter }} 秒
                          </span>
                        </template>
                      </a>
                    </div>
                  </div>
                </a-form-item>
              </template>
              <div class="mb-24px flex-between">
                <a
                style="color: grey;"
                v-if="loginModel.type === 'mobile'"
                >
                  {{ t('pages.login.forgotPassword') }}   
                </a>
                <a
                v-else 
                style="color: grey;
                opacity: 0;
                "
                >{{ t('pages.login.forgotyanzhengma') }}</a>

                <span style="
                
                opacity: 0.9;">
              <a href="/login" 
              style="
              text-decoration: underline;
              text-underline-position: auto;
              "
              >
                登录
              </a>  
              </span>

              </div>
              <!-- 协议同意复选框 -->
              <div class="agreement-checkbox" 
              style="
              position: relative;
              top: -32px;
              margin-bottom: 10px;">
                <a-checkbox v-model:checked="loginModel.agreeToTerms">
                <span
                style="color:rgb(102, 102, 102)"
                >
                已阅读并同意使用协议和隐私政策
              </span>
                  <!-- <a @click="() => router.push('/user-agreement')" style="color: #1976D2; text-decoration: underline;">
                    《用户服务协议》
                  </a> -->
                </a-checkbox>
              </div>
              
              <a-button 
              type="primary"
              :style="{
                backgroundColor: isFormValid ? 'rgba(34, 116, 227, 1.0)' : 'rgba(34, 116, 227, 0.6)',
                position: 'relative',
                color: isFormValid ? 'rgba(255, 255, 255, 1.0)' : 'rgba(255, 255, 255, 0.8)',
                top: '-15px',
                height: '58px',
                fontSize: '19px',
                borderRadius: '3px',
                transition: 'all 0.3s ease'
              }"
              :disabled="!isFormValid"
              block :loading="submitLoading" size="large" @click="submit">
                注册
              </a-button>
 
            </a-form>
            </div>

          </div>
          <!-- 右侧栏 -->
       
          <div style="
          width: 50%;
          height: 100%;
          border-left: 1px solid #d9d9d9;
          background-color: #FFFFFF;
          padding: 80px 50px 50px 50px;
          overflow-y: auto;
          ">
            <!-- 考试信息展示区域 -->
            <div style="max-width: 500px;">

              <h2 style="
                font-size: 20px;
                color: #333;
                font-weight: 600;
              ">基本信息</h2>

              <!-- 基本信息 -->
              <div style="color: #666; line-height: 1.8;">
                <div style="margin-bottom: 12px;">
                  考生提交报名信息后即可通过网银/手机银行汇款转账，请将电子汇款凭证通过电子邮件发送至指定邮箱。
                </div>
                <div style="margin-bottom: 12px;">
                  汇款时，考生或代付款人请在附言中注明考生姓名及考试名称，如"姓名 CDCS"。
                </div>
                <div style="margin-bottom: 12px;">
                  汇款1周后考生可登录报名页面并查看报名状态。若款项到账则报名状态会从"报名成功"变为"缴费成功"。
                </div>
                <div>
                  考生缴费成功后2周内可向培训中心申请退考，2周后，不再接受任何理由的退考。
                </div>
              </div>
              <h2 style="
                font-size: 20px;
                color: #333;
                margin-top: 30px;
                margin-bottom: 20px;
                font-weight: 600;
              ">考试规则</h2>
              
              <!-- 考试规则 -->
              <div style="margin-bottom: 24px;">
                <div style="margin-bottom: 12px; color: #666; line-height: 1.8;">
                  答题正确率高于70%即可通过。已通过单元成绩永久有效。
                </div>
                <div style="margin-bottom: 12px; color: #666; line-height: 1.8;">
                  考生需分别通过两个单元的考试后，才可获得CDCS证书。
                </div>
                <div style="color: #666; line-height: 1.8;">
                  考生可在有效期内任意时间随时登录myLIBF网站通过 Brightspace考试系统参加考试，无需提前预约。
                </div>
              </div>

              <h2 style="
                font-size: 20px;
                color: #333;
                margin-bottom: 20px;
                font-weight: 600;
                margin-top: 30px;
              ">联系方式</h2>

              <!-- 联系方式 -->
              <div style="margin-bottom: 24px;">
                <div style="margin-bottom: 12px; color: #666; line-height: 1.8;">
                  <strong style="color: #333;">联系人：</strong>郭老师
                </div>
                <div style="margin-bottom: 12px; color: #666; line-height: 1.8;">
                  <strong style="color: #333;">电话：</strong>010-82217209
                </div>
                <div style="margin-bottom: 12px; color: #666; line-height: 1.8;">
                  <strong style="color: #333;">邮箱：</strong>cdcschina@ccpit.org
                </div>
                <div style="color: #666; line-height: 1.8;">
                  <strong style="color: #333;">官网：</strong>www.ccpit.org
                </div>
              </div>
            </div>
          </div>
        </div>

      <!-- 展示登录页面 -->
      
    </div>
   

<!-- 主题登录 -->






    <div py-24px px-50px fixed bottom-0 z-11 w-screen :data-theme="layoutSetting.theme" text-14px>
      <GlobalLayoutFooter
        :copyright="layoutSetting.copyright" icp=""
      >
        <template #renderFooterLinks>
          <footer-links />
        </template>
      </GlobalLayoutFooter>
    </div>
  </div>
</template>

<style lang="less" scoped>

/* 登录页 tabs 样式 */
.login-tabs {
  :deep(.ant-tabs-tab),
  :deep(.ant-tabs-tab-btn) {
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: '等线';
    color: #7c7c7c !important;
  }
  
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #4781D2 !important;
    font-family: '等线';
    font-weight: 500 !important;
  }
  
  :deep(.ant-tabs-ink-bar) {
    background-color: #4781D2 !important;
  }
}

/* 原生密码框样式 */
.password-input-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 统一输入框样式 - 白色背景镂空效果 */
:deep(.ant-input),
.password-input {
  background-color: #FFFFFF !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

:deep(.ant-input:focus),
.password-input:focus {
  border-color: #40a9ff !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 登录按钮样式调整 */
:deep(.ant-btn-primary) {
  height: 35px !important;
  font-size: 14px !important;
}

/* 统一输入框标签样式 - 横向布局 */
.label-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 60px;
  flex-shrink: 0;
}

/* 移除浮动标签效果 */
.floating-label {
  display: none !important;
}

.password-input {
  width: 100%;
  height: 35px;
  padding: 8px 40px 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: #F9F9F9;
  outline: none;
  transition: all 0.3s ease;
}

.password-input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.eye-icon {
  font-size: 16px;
  user-select: none;
}

/* 密码输入框后缀样式 */
.password-toggle-eye {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  padding: 2px 4px;
  border-radius: 2px;
  border: none;
  user-select: none;
}

.password-toggle-eye:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 统一输入框高度 */
.password-input-wrapper {
  width: 100%;
}

.password-input-wrapper :deep(.ant-input) {
  height: 35px !important;
  padding-right: 40px !important;
  border: none !important; /* 去掉内层 input 的边框 */
  box-shadow: none !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper) {
  background-color: #F9F9F9 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper:hover) {
  border-color: #40a9ff !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-focused) {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 有误状态 */
.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error) {
  border-color: #ff4d4f !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error:focus) {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}

.code-input-container {
  position: relative;
  width: 100%;
}

.input-with-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #F9F9F9;
  border-radius: 3px;
  overflow: hidden; /* 确保圆角效果 */
}

.code-input {
  flex: 1;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-right: 120px; /* 为按钮留出空间 */
}

.code-input:focus {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.code-button {
  position: absolute;
  right: 4px;
  height: 32px;
  border: none;
  box-shadow: none;
  background: transparent;
  color: #1976D2;
  font-size: 14px;
  padding: 5px 10px;
  font-family: 'Microsoft YaHei', '等线', sans-serif;
  white-space: nowrap;
  z-index: 2;
}

.code-button:hover:not(.disabled) {
  background: transparent !important;
  color: #1976D2 !important;
  cursor: pointer;
}

.code-button.disabled,
.code-button:disabled {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

.code-button.disabled:hover,
.code-button:disabled:hover {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* 浮动标签样式调整 */
.floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #1890ff;
  transform: translateY(0);
  background-color: #fff;
}




.floating-label-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.floating-label {
  font-weight: 400;
  -webkit-font-smoothing: auto; /* 关闭抗锯齿，获得粗糙感 */
  -moz-osx-font-smoothing: auto;
  text-shadow: 0.1px 0.1px 0.1px rgba(99, 99, 99, 0.1); /* 轻微阴影增强质感 */
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  font-family: '粗体';
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #959595;
  transform: translateY(0);
}

/* 自定义表单验证有误消息样式 - 与输入框左侧对齐 */
:deep(.ant-form-item-explain-error) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 92px !important; /* 60px label width + 12px gap */
  color: #ff4d4f !important; /* 红色有误文字 */
  font-size: 14px !important;
}


.floating-label-input {
  padding-top: 8px;
  height: 48px;
}

/* 调整输入框聚焦时的样式 */
.floating-label-input:focus {
  background-color: #fff;
  border: 1px solid #1890ff !important;
}

/* 确保标签在输入框聚焦时也显示 */
.floating-label-input:focus + .floating-label {
  top: 0;
  font-size: 12px;
  color: #8a8a8a;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.08s ease;
}

.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: var(--bg-color-container);
}

.login-lang {
  height: 40px;
  line-height: 44px;
}

.login-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ant-pro-form-login-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  padding: 32px 0;
  overflow: auto;
  background: inherit
}

.ant-pro-form-login-header a {
  text-decoration: none
}

.ant-pro-form-login-title {
  color: var(--text-color);
  font-weight: 600;
  font-size: 33px;
  line-height: 1;
}

.ant-pro-form-login-logo {
  width: 44px;
  height: 44px;
  margin-right: 16px;
  vertical-align: top
}

.ant-pro-form-login-desc {
  color: var(--text-color-1);
  font-size: 14px;
  margin-left: 16px
}

.ant-pro-form-login-main-right {
  .ant-tabs-nav-list {
    margin: 0 auto;
    font-size: 16px;
  }

  .ant-pro-form-login-other {
    line-height: 22px;
    text-align: center
  }

  /* 自定义选项卡颜色为#1976D2 */
  /* 使用更直接的选择器提高优先级 */
  &:deep(.ant-tabs-tab .ant-tabs-tab-btn) {
    color: #6d6d6d !important;
    font-weight: 00 !important; /* 加粗字体 */
    font-size: 17px;
    font-family: '等线';
  }
  
  &:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #181818 !important;
    font-weight: 400 !important; /* 加粗字体 */


  }
  
  &:deep(.ant-tabs-ink-bar) {
    background-color: #256bd4 !important;
  }
  
  &:deep(.ant-tabs-tab:not(.ant-tabs-tab-active):hover .ant-tabs-tab-btn) {
    color: #000000 !important;
  }

}

.ant-pro-form-login-main{
  box-shadow: var(--c-shadow);
}

.icon {
  margin-left: 8px;
  color: var(--text-color-2);
  font-size: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: color .3s;

  &:hover {
    color: var(--pro-ant-color-primary);
  }
}

/* 自定义输入框背景色 */
  .custom-input-bg {
    &:deep(.ant-input) {
      background-color: #F9F9F9 !important;
    }
    
    &:deep(.ant-input-group-wrapper) {
      background-color: #F9F9F9 !important;
    }
    
    /* 确保placeholder区域也被覆盖 */
    &:deep(.ant-input::placeholder) {
      background-color: #F9F9F9 !important;
      opacity: 0.8;
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }
    
    /* 兼容不同浏览器的placeholder样式 */
    &:deep(.ant-input:-ms-input-placeholder) {
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }
    
    &:deep(.ant-input::-ms-input-placeholder) {
      color: #999999 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }
  
  /* 针对有清除按钮的情况调整内边距 */
  &:has(.ant-input-clear-icon) {
    &:deep(.ant-input) {
      padding-right: 24px !important;
    }
  }
}
.login-media(@width:100%) {
  .ant-pro-form-login-main{
    width: @width;
  }
  .ant-pro-form-login-main-left{
    display: none;
  }
  .ant-pro-form-login-main-right{
    width: 100%;
  }
  .ant-pro-form-login-desc{
    display: none;
  }
}
@media (min-width : 992px) {
  .ant-pro-form-login-main-left{
    width: 700px;
  }
}
@media(min-width:768px) and (max-width:991px){
  .ant-pro-login-divider{
    display: none;
  }
  .login-media(400px)
}
@media screen and (max-width:767px) {
  .login-media(350px);

  .ant-pro-login-divider{
    display: none;
  }
  
  // 移动端：外层容器宽度自适应，减少留白
  .ant-pro-form-login-main {
    width: 98% !important; // 从95%增加到98%
  }
  
  // 移动端：登录卡片宽度自适应
  .box-border {
    width: 100% !important;
    min-height: auto !important;
  }
  
  // 移动端：隐藏左侧图片
  .login-left-image {
    display: none !important;
  }
  
  // 右侧表单区域在移动端全宽
  .ant-pro-form-login-main-right {
    width: 100% !important;
    padding: 20px 10px !important; // 减少左右内边距从15px到10px
  }
  
  // 表单宽度调整
  .ant-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  // 调整输入框容器宽度
  .floating-label-container {
    width: 100% !important;
  }
  
  // 表单内容左右内边距调整并移除left偏移
  .ant-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important; // 移除80px的偏移
  }
  
  // 确保所有输入框在移动端为100%宽度
  .custom-input-bg,
  .floating-label-input {
    width: 100% !important;
    max-width: 100% !important;
    
    &:deep(.ant-input) {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
  
  // 输入框样式容器
  .floating-label-container {
    width: 100% !important;
  }
}
</style>
